<template>
   <div class="novel">
        <!--头部 -->
         <div class="name" @click="$router.go(-1)">书程小驿</div>
         <div class="children" @click="$router.go(-1)" ></div>
         <div class="header">
      <div class="containor">
        <div class="name"></div>
        <ul class="category">
          <li v-for="(category, index) in categories" :key="index">
            {{ category.name }}
          </li>
        </ul>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <span>联系我们</span>
        </div>
      </div>
    </div>
    <div class="swipper">
      <el-carousel height="470px">
        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <img :src="item.url" alt="图片丢失" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <h1>精选</h1>
     <div class="xs" style="position: relative;">
          <img
            src="http://47.109.18.97/images/lwc-shijianjianshi.png"
            alt="图片丢失"
            width="200px"
            height="150px"
            
          />
          <span style="position: absolute;"><h2>时间简史</h2>斯蒂芬·威廉·霍金  著<br>《时间简史》是英国物理学家斯蒂芬·威廉·霍金创作的科普著作，首次出版于1988年。
全书共十二章，讲述了关于宇宙本性的最前沿知识，包括：我们的宇宙图像、空间和时间、膨胀的宇宙、不确定性原理、黑洞、宇宙的起源和命运等内容，深入浅出地介绍了遥远星系、黑洞、粒子、反物质等知识，并对宇宙的起源、空间和时间以及相对论等古老命题进行了阐述。 [1] 
在该书里，霍金探究了已有宇宙理论中存在的未解决的冲突，并指出了把量子力学、热动力学和广义相对论统一起来存在的问题，该书的定位是让那些对宇宙学有兴趣的普通读者了解他的理论和其中的数学原理。 [2] 
该书自1988年首版以来，已被翻译成40种文字，累计销售量突破2500万册，成为一本畅销全世界的科学著作。<br></span>
          </div>

          <div class="xs" style="position: relative;">
          <img
            src="http://47.109.18.97/images/wanwulun.png"
            alt="图片丢失"
            width="200px"
            height="150px"
          />
          <span style="position: absolute;"><h2>万物论</h2>李溱东  著<br>《万物论》是由北京华源书阁文化传播有限公司策划，团结出版社出版的一本自然科学类书籍。《万物论》本书共分为三个章节，第一章是简单介绍宇宙起源、结构和运动情况；第二章是详细介绍万物始终、结构、组成和运动情况；第三章是解释一些常见的自然现象。书中的内容都是经过作者的潜心研究和摸索而完成的，受到人们的关注、喜欢和重视。介绍万物运动规律，主要是让人进一步了解自然界，更好地按照自然界的规律办事，让人类文明发展得更好。</span>
        </div>

        <div class="xs" style="position: relative;">
          <img
            src="http://47.109.18.97/images/lwc-huaxueyurenlei.png"
            alt="图片丢失"
            width="200px"
            height="150px"
            
          />
          <span style="position: absolute;"><h2>化学与人类</h2>刘旦出  著<br>在我们生活中往往会涉及一些易燃易爆及有毒的物质,只有掌握了它们的规律才能防患于未然,本书也为读者提供“避害”的知识。综览全书你将会对身边发生的化学现象从知其然到知其所以然,并对学中的一些基本原理和知识有进一步的了解和认识。本书是一本非化学专业本科生的化学知识参考读物。<br></span>
          </div>

        <div class="xs" style="position: relative;">
          <img
            src="http://47.109.18.97/images/lwc-renlei.png"
            alt="图片丢失"
            width="200px"
            height="150px"
            
          />
          <span style="position: absolute;"><h2>人体是如何工作的</h2>梶原哲郎   著<br>这是一本全面介绍我们美妙的人体的科普图鉴。全书共分为9 个章节，系统地讲解了
人体各部分的科普知识，并搭配了精美的插图和数据表格。书中从细胞和基因开始讲起，内容涵盖了脑和神经、感觉器官、呼吸器官、循环器官、消化器官、泌尿器官、运动器官以及生殖器官等人体的全方位内容。
本书适合广大的科普爱好者阅读，尤其适合对人体感兴趣的青少年读者学习参考。<br></span>
          </div>   

        

    </div>

</template>
<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
         categories: [],
         carousel: []
    };
    },
    methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        // 将后台响应的轮播图数据，设置到组件的数据模型中
        this.carousel = res.data;
      });
    },
    },
    created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
     this.findAllCarousel();
    },
    
};
</script>
<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.xs{
 cursor: pointer;   
}
</style>
